import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
} from 'react-native';

import Person from '../entity/PersonBean';
import NormalLine from './NormalLine';
import HeadLine from './HeadLine';
import RotateView from '../widget/RotateView';

/** 查询单项 */
export default class QueryItemView extends Component {
    render() {
        return (
            <View style={styles.flexTop}>
                <Text style={styles.startTime}>{this.props.people.mSendTime}</Text>
                { this._getCreditIdLine(this.props.people)  }
                { this._getTimeLine(this.props.people)      }
                { this._getContainerView(this.props.people) }
                <View/>
            </View>
        );
    }

    /** CreditId行 */
    _getCreditIdLine(person) {
        if (typeof person === 'undefined') return;
        switch (person.mStatus) {
            case Person.QUERYING: {
                return (
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                        <Text style={styles.targetID}>{person.mCreditId}</Text>
                        <RotateView style={styles.rotate}>
                            <Image style={styles.valuePic} source={require('../../../img/ic_load.png')}/>
                        </RotateView>
                    </View>

                )
            }

            case Person.RETURN_SUCCESS:
            case Person.RETURN_FAIL: {
                return <Text style={styles.targetID}>{person.mCreditId}</Text>;
            }
        }
    }

    /** ReceiveTime行 */
    _getTimeLine(person) {
        if (typeof person === 'undefined') return;
        switch (person.mStatus) {
            case Person.QUERYING: {

                break;
            }

            case Person.RETURN_SUCCESS: {
                return <Text style={styles.endTime}>{person.mReceiveTime}</Text>;
            }

            case Person.RETURN_FAIL: {
                return <Text style={styles.endTime}>{person.mReceiveTime}</Text>;
            }
        }
    }

    /** 渲染查询结果视图(可能成功,可能失败) */
    _getContainerView(person) {
        if (typeof person === 'undefined') return;
        switch (person.mStatus) {
            case Person.QUERYING: {
                // return this._getProgressView(person);
            }

            case Person.RETURN_SUCCESS: {
                return this._getSuccessView(person);
            }

            case Person.RETURN_FAIL: {
                return this._getErrorView();
            }
        }
    }

    /** 成功视图(包含各种信息行) */
    _getSuccessView(person) {
        return <View style={styles.container}>
            <View style={{flex: 1}}/>
            <View style={styles.content}>
                {
                    person.mPersonParmas.map((param) => {
                        if (param.n === 'type') return;
                        if (param.n === 'XP') return <HeadLine key={param.v} item={param}/>;
                        else return <NormalLine key={param.v} item={param}/>;
                    })}
            </View>
        </View>;
    }

    /** 错误视图 */
    _getErrorView() {
        return <View style={{flex: 1}}>
            <Text style={{alignSelf: 'center', fontSize: 18}}>查询失败</Text>
        </View>;
    }

}

//样式定义
const styles = StyleSheet.create({
    flexTop: {
        flexDirection: 'column',
    },
    startTime: {
        // alignItem: 'center',
        fontSize: 12,
        color: '#000000',
        alignSelf: 'center',
        margin: 3,
    },
    targetID: {
        fontSize: 18,
        color: '#000000',
        backgroundColor: '#b2e866',
        borderRadius: 5,
        alignSelf: 'flex-start',
        marginLeft: 5,
        padding: 5,
        marginRight: 10,
    },
    endTime: {
        fontSize: 12,
        color: '#000000',
        alignSelf: 'center',
        margin: 3,
    },
    container: {
        flexDirection: 'row',
    },
    content: {
        flex: 8,
        backgroundColor: '#a3e3e8',
        borderRadius: 5,
        marginRight: 5,
    },
    rotate: {
        alignSelf: 'center',
        justifyContent: 'center',
        alignItems: 'center',
    },
    valuePic: {
        height: 20,
        width: 20,
    },
});
